<template>
  <el-input :type="inputType">
    <template #suffix>
      <el-icon class="cursor-pointer" @click="toggle"
        ><component :is="suffixIcon"
      /></el-icon>
    </template>
  </el-input>
</template>

<script setup>
import { View, Hide } from "@element-plus/icons-vue";

const hidePwd = ref(true);
const inputType = computed(() => (hidePwd.value ? "password" : "input"));
const suffixIcon = computed(() => (hidePwd.value ? View : Hide));
const toggle = () => {
  hidePwd.value = !hidePwd.value;
};
</script>
